<!--
	课程详情
-->
<template>
<!-- 最外面这一层是背景色 start -->
<div class="course-info-box">
<!-- 内容层控制了宽度 start -->
<div class="course-info-content" >
	<!-- 页头 start -->
	<div class="page-header">
		<el-page-header @back="this.$router.push({path:'/teacher/index'})" >
			<template #title>
				<div style="color: #666666; font-size: 17px">返回</div>
			</template>
			<template #content>
				<div style="color: #666666;">{{teacherInfoData.thisEditCourse.name}}</div>
			</template>
		</el-page-header>
	</div>
	<!-- 页头 end -->
	<!-- 课程的基础信息 start -->
	<div class="course-base-info">
		<div class="left">
			<img src="@/assets/images/course1.jpg" style="width: 450px;height: 250px;" alt="photo"/>
		</div>
		<div class="right">
			<!-- 课程名字 start -->
			<div class="right-name">
				{{teacherInfoData.thisEditCourse.name}}
			</div>
			<!-- 课程名字 end -->
			<!-- 教师列表 start -->
			<div>
				<!-- 这里跟字符串拼接会直接转，具体情况值得研究，在这记录 -->
				教师：{{ teacherInfoData.thisEditCourse.teacherList.map((item)=>{return item.name;})+""}}
			</div>
			<!-- 教师列表 end -->
			<!-- 课程大纲 start -->
			<div>
				{{teacherInfoData.thisEditCourse.syllabus}}
			</div>
			<!-- 课程大纲 end -->
		</div>
	</div>
	<!-- 课程的基础信息 end -->

	<div class="course-edit">
		<el-container>
			<el-aside width="200px">
				<el-menu
					:default-active="thisRouter"
					class="el-menu-vertical-demo"
					:router="true"
					@open=""
					@close=""
				>
					<!-- 循环菜单 -->
					<template #default>
						<div v-for="(menu,index) in teacherMenuList">
							<!-- 先判断有没得子菜单  -->
							<!-- 有子菜单 start -->
							<el-sub-menu v-if="menu.children&&menu.children.length>0"  :index="menu.path">
								<template #title>
									<!-- 以后动态使用icon都这种写,新版本ElementPlus不支持icon在main中注册的 -->
									<component class="el-icon" :is="menu.icon"></component>
									<span>{{ menu.title }}</span>
								</template>
								<!-- 循环显示子菜单 -->
								<!-- 这里只能加载两层，推荐使用递归加载 ，是需要优化的 https://www.cnblogs.com/qq128/p/13479575.html -->
								<template #default>
									<el-menu-item v-for="(childrenMenu,childrenIndex) in menu.children"
												  @click="updateRouter"
												  :index="childrenMenu.path">{{childrenMenu.title}}</el-menu-item>
								</template>
							</el-sub-menu>
							<!-- 有子菜单 end -->
							<!-- 没得子菜单 -->
							<el-menu-item v-else :index="menu.path" @click="updateRouter">
								<!-- 以后动态使用icon都这种写,新版本ElementPlus不支持icon在main中注册的 -->
								<component class="el-icon" :is="menu.icon"></component>
								<span>{{menu.title}}</span>
							</el-menu-item>

						</div>
					</template>
				</el-menu>
			</el-aside>
			<el-main>
				<lzk-tip :info="getPathString()" show="tip" @click="getPathString"></lzk-tip>
				<router-view></router-view>
			</el-main>
		</el-container>
	</div>
</div>
<!-- 内容层控制了宽度 end -->
</div>
<!-- 最外面这一层是背景色 end -->
</template>

<script>
import ipconfig from "@/utils/ipconfig";
import axios from "@/plugins/axios";
import TipHeader from "@/components/tip/TipHeader";

export default {
	name: "CourseInfo",
	data(){
		return {
			/**
			 * 教师登录数据
			 */
			teacherInfoData:this.$store.state.teacherInfoData,
			/**
			 * 菜单数据
			 */
			teacherMenuList:[],
			/**
			 * 当前选择的菜单项
			 */
			thisRouter:"",
		}
	},
	methods:{
		/**
		 * 菜单被点击的回调，这主要解决显示问题
		 * @param item
		 */
		updateRouter(item){
			this.thisRouter=item.index;
		},
		/**
		 * 获取显示的菜单内容
		 * @returns {string}
		 */
		getPathString(){
			let str="";
			if (this.teacherMenuList.length>0&&this.thisRouter!=''){
				this.teacherMenuList.forEach(item=>{
					if(item.path==this.thisRouter){
						str=item.title;
					}
				});
			}
			return str;
		}
	},
	created() {
		// 在这获取教师菜单
		axios.get(ipconfig.selfAddress+"/data/teacherMenu.json").then((response)=>{
			this.teacherMenuList=response.data;
		}).catch((error)=>{
		    console.log(error);
		});
		// 这里是解决菜单默认选中项的问题，直接访问网址会有这个问题，在这解决
		this.thisRouter=this.$route.path;
	},
	components:{
		"lzk-tip":TipHeader,
	},
}
</script>

<style lang="scss" scoped>
@mixin wh{
	width: 100%;
	height: 100%;
}
.course-info-box{
	@mixin flexColumn{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	@include wh;
	@include flexColumn;
	background: #EEEEEE;
	margin-top: 20px;

	.course-info-content{
		margin: 20px 0 20px 0;
		width: 97%;
		height: 100%;
		@include flexColumn;

		.page-header{
			width: 84%;
			height: 100%;
			margin-bottom: 20px;
		}

		.course-base-info{
			width: 80%;
			height: 100%;
			background: #ffffff;
			display: flex;
			padding: 25px;

			.left{
				// 阴影
				//box-shadow: 0 2px 4px rgba(0,0,0,0.12),0 0 6px rgba(0,0,0,0.04);
			}

			.right{
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				margin-left: 25px;

				.right-name{
					font-size: 25px;
					font-weight: bold;
				}

				// 下面的所有div 有间距
				div{
					margin-bottom: 10px;
				}
			}
		}

		.course-edit{
			width: 84%;
			height: 100%;
			margin-top: 20px;
			padding-right: 0;
		}
	}
}
</style>